<!--  -->
<template>
  <div class="">
    <h1>{{ $store.state.name }}</h1>
    <el-button class="btn btn-primary" @click="updateName">修改用户名</el-button>
    <h1>首页-----{{ $store.state.user.name }}</h1>
    <el-button class="btn btn-primary" @click="updateUserName">修改用户名</el-button>
    <h1 v-for="(item,index) in $store.state.userList" :key="index">
      {{ item.name }}-------{{ item.age }}
    </h1>

    <el-button class="btn btn-primary" @click="addUser">添加用户到集合里</el-button>
  </div>
</template>

<script>
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {};
  },
  //方法集合
  methods: {
    updateName(){
      // 第一个是方法名，第二个参数是需要修改的
      this.$store.commit('updateName','cc')
    },
    updateUserName(){
      this.$store.commit('updateUserName',{
        name:'awda'
      })
    },
    addUser(){
      this.$store.commit('addUser',{
        name:'awfawf',
        age:9497
      })
    }
  },
};
</script>
<style lang="less" scoped>
//@import url(); 引入公共css类
</style>
